<template>
	<div class="mainRight">
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane
				:label="item.label"
				:name="item.name"
				v-for="(item, index) in headList"
				:key="index"
			>
				<el-form
					inline
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					label-width="100px"
					class="ruleForm"
				>
					<el-form-item
						label="发布组织"
						prop="name"
						v-show="activeName == 'tissue'"
					>
						<treeselect
							v-model="queryParams.userid"
							:options="deptOptions"
							:show-count="true"
							:normalizer="normalizer"
							placeholder="请选择所属组织"
						/>
					</el-form-item>
					<el-form-item label="题目" prop="name">
						<el-input
							v-model="ruleForm.name"
							placeholder="请输入题目名称"
						></el-input>
					</el-form-item>
					<el-form-item label="题库" prop="name">
						<el-input
							v-model="ruleForm.name"
							placeholder="请输入题库名称"
						></el-input>
					</el-form-item>
					<el-form-item label="创建时间" prop="name">
						<el-date-picker
							v-model="ruleForm.name"
							type="daterange"
							range-separator="~"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							style="width: 100%"
						>
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div class="tableListOperator">
					<div class="leftBtns">
						<el-button
							type="primary"
							size="small"
							icon="el-icon-plus"
							v-show="activeName == 'tissue'"
							@click="add"
							>新建题库</el-button
						>
					</div>
					<div class="rightBtns">
						<el-button size="small" plain>重置</el-button>
						<el-button type="primary" size="small">查询</el-button>
					</div>
				</div>
				<div class="box">
					<el-card
						class="box-card"
						v-for="(item, index) in 10"
						:key="index"
					>
						<div class="card_title">每周一测_共产党员网</div>
						<div>
							<span
								style="
									color: rgba(0, 0, 0, 0.45);
									font-size: 14px;
									padding-right: 12px;
								"
								>总题数</span
							>
							<span
								style="
									font-size: 24px;
									color: rgba(0, 0, 0, 0.65);
								"
								>4</span
							>
						</div>
						<div
							style="
								font-size: 12px;
								font-weight: 400;
								color: #999;
								padding-left: 20px;
							"
						>
							<div>|-单选:10题</div>
							<div>|-多选:0题</div>
							<div>|-判断:0题</div>
						</div>
						<div
							style="
								position: absolute;
								bottom: 66px;
								font-size: 14px;
								color: #333333;
								text-align: right;
								right: 20px;
							"
						>
							<div>2023-11-22 23:26:24 创建</div>
							<div>中共东城街道北辰社区党支部</div>
						</div>
						<div class="handlebtns">
							<span class="hbtn" v-show="activeName == 'tissue'"
								><el-button type="text" @click="edit(item)"
									>修改</el-button
								></span
							>
							<span class="hbtn" v-show="activeName == 'tissue'"
								><el-button type="text" @click="del(item)"
									>删除</el-button
								></span
							>
							<span class="hbtn" v-show="activeName == 'tissue'"
								><el-button type="text" @click="syqk(item)"
									>使用情况</el-button
								></span
							>
							<span class="hbtn" v-show="activeName == 'tissue'"
								><el-button
									type="text"
									@click="questionEdit(item)"
									>题目管理</el-button
								></span
							>
							<span class="hbtn" v-show="activeName == 'system'"
								><el-button type="text"
									>选用题库</el-button
								></span
							>
						</div>
					</el-card>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-dialog
			:title="dialogtitle"
			:visible.sync="dialogVisible"
			width="800px"
		>
			<el-form label-width="100px">
				<el-form-item label="题库名称">
					<el-input placeholder="请填写" />
				</el-form-item>
				<el-form-item label="发布组织">
					<treeselect
						:options="deptOptions"
						:show-count="true"
						:normalizer="normalizer"
						placeholder="请选择所属组织"
					/>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog
			title="使用情况"
			:visible.sync="shiyongqingkuang"
			width="800px"
		>
			<el-descriptions title="">
				<el-descriptions-item label="题库题目"
					>共10题</el-descriptions-item
				>
				<el-descriptions-item label="共使用">2题</el-descriptions-item>
				<el-descriptions-item label="使用次数"
					>共1次</el-descriptions-item
				>
			</el-descriptions>
			<el-table :data="[{}]">
				<el-table-column label="使用组织" />
				<el-table-column label="使用次数" />
				<el-table-column label="使用题数" />
			</el-table>
		</el-dialog>
		<el-dialog
			title="题目列表"
			:visible.sync="showquestions"
			width="1200px"
		>
			<el-form label-width="100px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="题目：">
							<el-input placeholder="请输入题目名称" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="题目类型：">
							<el-select
								value="1"
								placeholeder="请选择题目类型"
								style="width: 100%"
							>
								<el-option
									v-for="item in 3"
									:key="item"
									:value="item"
									:label="item"
								></el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="8">
						<el-form-item label="使用次数：">
							<el-input-number
								placeholeder="请输入使用次数"
								controls-position="right"
								:min="0"
								style="width: 100%"
							></el-input-number> </el-form-item
					></el-col>
				</el-row>
			</el-form>

			<div class="tableListOperator">
				<div class="leftBtns">
					<el-button size="small" type="primary" @click="addquestion"
						>新增题目</el-button
					>
					<el-button size="small" plain>导入题目</el-button>
					<el-button
						size="small"
						plain
						:disabled="multiple"
						@click="delquestion"
						>批量删除</el-button
					>
					<el-button
						size="small"
						plain
						:disabled="multiple"
						@click="move"
						>批量移动</el-button
					>
				</div>
				<div class="rightBtns">
					<el-button size="small" plain>查询</el-button>
					<el-button size="mini" type="primary">重置</el-button>
				</div>
			</div>
			<div>题库名称：《每周一测_共产党员网》</div>
			<el-table
				:data="questionlist"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="50" align="center" />
				<el-table-column prop="content" label="题目" />
				<el-table-column label="题目类型" width="100">
					<template slot-scope="{ row }">
						{{ row.type }}
					</template>
				</el-table-column>
				<el-table-column
					label="使用次数"
					width="100"
					prop="usedtimes"
				/>
				<el-table-column label="操作" width="200">
					<template slot-scope="{ row }">
						<el-button type="text">使用情况</el-button>
						<el-button type="text" @click="editquestion(row)"
							>编辑</el-button
						>
						<el-button type="text" @click="delquestion(row)"
							>删除</el-button
						>
						<el-button type="text" @click="move(row)"
							>移动</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog
			:title="`${questionform.id ? '编辑' : '新增'}题目`"
			:visible.sync="questiondialog"
		>
			<el-form
				:model="questionform"
				ref="questionform"
				label-width="100px"
			>
				<el-form-item label="题目名称">
					<el-input
						placeholder="请输入题目名称"
						v-model="questionform.content"
					></el-input>
				</el-form-item>
				<el-form-item label="题目类型">
					<el-radio-group
						v-model="questionform.type"
						@input="typeChange"
					>
						<el-radio :label="1">单选题</el-radio>
						<el-radio :label="2">多选题</el-radio>
						<el-radio :label="3">判断题</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="" label-width="0px">
					<div
						class="ans"
						v-for="(item, index) in questionform.answers"
						:key="index"
					>
						<span v-if="questionform.type != 3"
							>{{ tips[index] }}:</span
						>
						<el-input
							v-model="item.label"
							style="margin: 0 10px 0 10px"
						></el-input>
						<i
							class="el-icon-remove-outline"
							style="
								font-size: 30px;
								margin-right: 30px;
								cursor: pointer;
							"
							@click="questionform.answers.splice(index, 1)"
						></i>
						<el-checkbox v-model="item.isanswer"
							>设为正确答案</el-checkbox
						>
					</div>
				</el-form-item>
				<el-button
					type="text"
					@click="
						questionform.answers.push({
							label: '',
							isanswer: false,
						})
					"
					>添加选项</el-button
				>
				<el-form-item label="题目解析">
					<el-input
						type="textarea"
						v-model="questionform.analysis"
						placeholder="请输入题目解析"
					></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
import { parentlist } from '@/api/tissue'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
	components: { Treeselect },
	data() {
		return {
			tips: [
				'A',
				'B',
				'C',
				'D',
				'E',
				'F',
				'G',
				'H',
				'I',
				'J',
				'K',
				'L',
				'M',
				'N',
				'O',
				'P',
				'Q',
				'R',
				'S',
				'T',
				'U',
				'V',
				'W',
				'X',
				'Y',
				'Z',
			],
			activeName: 'tissue',
			headList: [
				{
					label: '组织题库',
					name: 'tissue',
				},
				{
					label: '系统题库',
					name: 'system',
				},
			],
			queryParams: {},
			ruleForm: { name: '' },
			rules: {},
			deptOptions: [],
			dialogVisible: false,
			dialogtitle: '',
			shiyongqingkuang: false,
			questionlist: [
				{
					id: 1,
					type: 1,
					content: '题目的主要内容',
					answers: [
						{ label: 'A', isanswer: true },
						{ label: 'B', isanswer: false },
						{ label: 'C', isanswer: false },
						{ label: 'D', isanswer: false },
					],
					analysis: '题目解析',
					usedtimes: 100,
				},
			],
			showquestions: false,
			ids: [],
			// 非多个禁用
			multiple: true,
			questiondialog: false,
			questionform: {
				answers: [],
			},
		}
	},
	methods: {
		normalizer(node) {
			//当子节点也就是children=[]时候去掉子节点
			if (node.childlist && !node.childlist.length) {
				delete node.childlist
			}
			return {
				id: node.id,
				label: node.name,
				children: node.childlist,
			}
		},
		handleClick() {
			if (this.activeName == 'tissue') {
			} else {
			}
		},
		add() {
			this.dialogVisible = true
			this.dialogtitle = '新建题库'
		},
		edit(row) {
			this.dialogVisible = true
			this.dialogtitle = '编辑题库'
		},
		del(row) {
			this.$confirm(
				`确认删除后，此题库的所有题目后续将无法再次使用`,
				'确定删除当前题库吗?',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
				.then(() => {})
				.catch(() => {})
		},
		syqk(row) {
			this.shiyongqingkuang = true
		},
		questionEdit(row) {
			this.showquestions = true
			console.log(row)
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.multiple = !selection.length
		},
		addquestion() {
			this.questiondialog = true
		},
		editquestion(row) {
			this.questionform = row
			this.questiondialog = true
		},
		delquestion(row) {
			const ids = row.id || this.ids
			this.$confirm(
				`确认删除后，此题目将无法再次使用`,
				'确定删除当前题目吗?',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
				.then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!',
					})
				})
				.catch(() => {})
		},
		move(row) {
			const ids = row.id || this.ids
		},
		typeChange() {
			console.log(this.questionform.type)
			if (this.questionform.type != 2) {
			}
		},
	},
	created() {
		parentlist().then((response) => {
			this.deptOptions = response.data
		})
	},
}
</script>
<style lang="scss" scoped>
.ruleForm {
	margin-bottom: 14px;
	::v-deep .el-form-item {
		width: 32.5%;
		// margin-right: 0;
		margin-bottom: 10px;
	}
	::v-deep .el-form-item__content {
		width: calc(100% - 100px);
		.el-select {
			width: 100%;
		}
	}
}
.box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.box-card {
		width: 30%;
		margin-top: 16px;
		position: relative;
		padding-bottom: 46px;
		.card_title {
			font-size: 16px;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 6px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
.handlebtns {
	width: 100%;
	height: 46px;
	background: #f5f5f5;
	margin-top: 20px;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	.hbtn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20px;
		border-right: solid 1px #e8e8e8;
		&:last-child {
			border: none;
		}
	}
}
.ans {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;
}
</style>
